<template>
	<view>
		<!-- :statusBar=true 保留状态栏 -->
		<uni-nav-bar @clickLeft="back" @clickRight="" leftIcon="arrowleft" rightIcon="person" :statusBar="true">
			<view class="flex-sc-ac" style="width: 100%;font-size: 32rpx;font-weight: 500;">
				修女
			</view>
		</uni-nav-bar>
		<view class="chat-content">
			<block v-for="(item,index) in list" :key="index">
				<view class="chatflex-left" v-if="item.person=='you'">
					<view>
						<image src="../../static/demo/userpic/19.jpg" class="userimage"></image>
					</view>
					<view class="talkbubblebyyou" style="margin-left: 20rpx;box-sizing: border-box;">
						<image class="chatthing " :src="item.content" mode="" v-if="item.type=='photo'"></image>
						<text class="flex-sp-ac chattext" v-if="item.type=='font'">{{item.content}}</text>
					</view>
				</view>

				<view class="chatflex-right" v-if="item.person=='me'">
					<view class="talkbubblebyme" style="margin-right: 20rpx;box-sizing: border-box;">
						<image class="chatthing " :src="item.content" mode="" v-if="item.type=='photo'"></image>
						<text class="flex-sp-ac chattext" v-if="item.type=='font'">{{item.content}}</text>
					</view>
					<view>
						<image src="../../static/demo/userpic/6.jpg" class="userimage"></image>
					</view>
				</view>
			</block>

			<view class="chat-input" style="display: flex;align-items: center;">
				<view class="search-input"><input v-model="isay" type="text" class="uni-input" placeholder="文明发言"></view>
				<view class="icon iconfont icon-fabu"
					style="color: #000000;margin-left: 25rpx;font-size: 45rpx;font-weight: 600;" @tap="upload"></view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isay: "",
				list: [{
						person: "me",
						type: "photo",
						content: "../../static/demo/datapic/9.jpg"

					},
					{
						person: "you",
						type: "font",
						content: "终生学习,用好大脑"
					},
					{
						person: "me",
						type: "photo",
						content: "../../static/demo/datapic/5.jpg"
					},
					{
						person: "you",
						type: "font",
						content: "python骚操作，自动抢火车票"
					},
					{
						person: "you",
						type: "photo",
						content: "../../static/demo/datapic/7.jpg"
					},
					{
						person: "me",
						type: "font",
						content: "和你聊天真好"
					}
				]

			}
		},
		methods: {
			upload() {
				console.log(12)
				this.list.push({
					person: "me",
					type: "font",
					content: this.isay
				})
				this.isay = ""
				setTimeout(() => {
					uni.pageScrollTo({
						scrollTop: 99999,
						duration: 0
					});
				}, 100);
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style>
	.chat-content {
		padding: 30rpx;
		margin-bottom: 70rpx;
	}

	.talkbubblebyme {
		width: fit-content;
		background: #F4F4F4;
		position: relative;
		border-radius: 10rpx;
	}

	.talkbubblebyme:before {
		content: "";
		position: absolute;
		left: 100%;
		top: 20px;
		width: 0;
		height: 0;
		border-top: 10px solid transparent;
		border-left: 10px solid #F4F4F4;
		border-bottom: 10px solid transparent;
	}

	.talkbubblebyyou {
		width: fit-content;
		background: #F4F4F4;
		position: relative;
		border-radius: 10rpx;
	}

	.talkbubblebyyou:after {
		content: "";
		position: absolute;
		right: 100%;
		top: 20rpx;
		width: 0;
		height: 0;
		border-bottom: 10px solid transparent;
		border-top: 10px solid transparent;
		border-right: 10px solid #F4F4F4;
	}

	.chatthing {
		padding: 20rpx;
		width: 400rpx;
		height: 300rpx;
	}

	.userimage {
		width: 100rpx;
		height: 100rpx;
		margin-right: 10rpx;
		border-radius: 50rpx;
	}

	.chatflex-left {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 30rpx;
	}

	.chatflex-right {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 30rpx;
	}

	.chattext {
		text-align: center;
		padding: 25rpx 20rpx 0rpx 20rpx;
	}

	.chat-input {
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 200;
		background-color: #FFFFFF;
		padding: 20rpx;
	}

	.search-input>input {
		/* background-color: red; */
		border: 1rpx solid #000000;
		width: 550rpx;
		/* margin-left: 15rpx; */
		border-radius: 15rpx;
	}
</style>
